<template>
  <!-- 弹窗 -->
  <div class="question-review">
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="900px;"
      @close="handleClose"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          【题型】: {{ getQueType(detail.questionType) }}题
        </el-col>
        <el-col :span="6">
          【编号】: {{ detail.id }}
        </el-col>
        <el-col :span="6">
          【难度】: {{ difficulty[+detail.difficulty] }}
        </el-col>
        <el-col :span="6">
          【标签】: {{ detail.tags }}
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          【学科】: {{ detail.subjectName }}
        </el-col>
        <el-col :span="6">
          【目录】: {{ detail.directoryName }}
        </el-col>
        <el-col :span="6">
          【方向】: {{ detail.direction }}
        </el-col>
      </el-row>
      <hr>
      <div>【题干】  </div>
      <div style="color:blue" v-html="detail.question" />
      <div  v-if="detail.questionType !== '3'" > {{ getQueType(detail.questionType) }}题 选项： （以下选中的选项为正确答案）</div>
      <template>
        <div v-if="detail.questionType === '1'">
          <el-radio
            v-for="item in detail.options"
            :key="item.id"
            :value="radio"
            :label="item.title ?item.isRight :''"
          >{{ item.title }}
          </el-radio>
        </div>
        <div v-else-if="detail.questionType === '2'">
          <el-checkbox-group :value="checkList">
            <el-checkbox
              v-for="item in detail.options"
              :key="item.id"
              :label="item.title"
            />
          </el-checkbox-group>
        </div>
      </template>
      <hr>
      <div>
        【参考答案】 ：  <el-button :type="btnInfo.type" size="small" @click="videoReview">{{ btnInfo.message }}</el-button>
      </div>
      <div v-if="videoShow" class="video">
        <video controls="controls" autoplay :src="detail.videoURL">您的浏览器不支持视频预览</video>
      </div>
      <hr>
      <el-row>
        <el-col>
          【答案解析】 ： {{ HtmlToText(detail.answer) }}
        </el-col>
      </el-row>
      <hr>
      <div>
        【题目备注】 ： {{ detail.remarks }}
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button type="primary" @click="$emit('close')">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { questionType } from '@/api/hmmm/constants.js'
export default {
  props: {
    // 弹窗显示和隐藏
    dialogVisible: {
      type: Boolean,
      required: true
    },
    // 详情数据
    detail: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 导入题型对象常量
      questionType: questionType,
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 视频展示和隐藏
      videoShow: false,
      // 单选框默认值
      radio: 1
    }
  },
  computed: {
    btnInfo () {
      return {
        // 按钮信息
        type: this.videoShow ? 'info' : 'danger',
        message: this.videoShow ? '关闭视频预览' : '视频答案预览'
      }
    },
    // 多选框
    checkList () {
      const ary = []
      this.detail.options.filter(item => {
        if (item.isRight === 1) {
          ary.push(item.title)
        }
      })
      return ary
    }
  },
  methods: {
    // 获取题型内容
    getQueType (val = '1') {
      // 防止参数报错
      if (!+val) return '单选'
      const type = this.questionType.filter(item => item.value === +val)
      return type[0].label
    },
    // 点X和蒙版 弹窗关闭
    handleClose () {
      this.$emit('close')
      this.videoShow = false
    },
    // 视频预览
    videoReview () {
      // 展示视频
      this.videoShow = !this.videoShow
    },
    // 将从后台带有html标签格式的内容转换为纯文本
    HtmlToText (htmlStr) {
      const div = document.createElement('div')
      div.innerHTML = htmlStr
      return div.textContent || div.innerText || ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .question-review  {
    .el-col {
      padding: 10px 0;
    }
    .el-radio {
      display: block;
      padding: 10px 0;
    }
    .el-checkbox{
      display: block;
      padding: 10px 0;
    }
    .video {

      video {
        width: 400px;
        height: 300px;
      }
    }
  }
</style>
